<template>
	<view class="home">
		<u-subsection :list="list" mode="button" :current="current2" @change="change2" v-show="qiehuan"></u-subsection>
		<shuangshuiwei ref="myswj" :listobjSSW="objSSW" v-show="!titIf"></shuangshuiwei>
		<view class="tpe" v-show="titIf">
<!-- 			<view class="title">
				<text class="tit">IMEI：</text>
				<text class="clo">{{thingsModelValue.IMEI}}</text>
			</view> -->
			<view class="list">
				<view class="item hei_ght">
					<view class="tit">上报时间</view>
					<view class="clo">{{$u.timeFormat(thingsModelValue.TIME, 'yyyy-mm-dd')}}</view>
					<view class="clo">{{$u.timeFormat(thingsModelValue.TIME, 'hh:mm')}}</view>
				</view>
				<view class="itema hei_ght">
					<view class="tit">IMEI</view>
					<view class="clo">{{thingsModelValue.IMEI}}</view>
				</view>
				<view class="itemb hei_ght">
					<view class="tit">经度</view>
					<view class="clo">{{thingsModelValue.LONG}}</view>
				</view>
				<view class="itemc hei_ght">
					<view class="tit">纬度</view>
					<view class="clo">{{thingsModelValue.LATI}}</view>
				</view>
				<view class="itemd hei_ght">
					<view class="tit">电池电量</view>
					<view class="clo">{{thingsModelValue.BATC}}%</view>
				</view>
				<view class="iteme hei_ght">
					<view class="tit">太阳能电压</view>
					<view class="clo">{{thingsModelValue.SUNV}}V</view>
				</view>
				<view class="itemf hei_ght">
					<view class="tit">水位值</view>
					<view class="clo">{{thingsModelValue.WATL}}米</view>
				</view>

				<view class="itemg hei_ght">
					<view class="tit">数据采集周期</view>
					<view class="clo">{{thingsModelValue.DAPV}}分钟</view>
				</view>
			</view>
			<!-- 			<view class="item">
				<text class="tit">测站编号：</text>
				<text class="clo">{{thingsModelValue.CODE}}</text>
			</view>
			<view class="item">
				<text class="tit">经度：</text>
				<text class="clo">{{thingsModelValue.LONG}}</text>
			</view>
			<view class="item">
				<text class="tit">纬度：</text>
				<text class="clo">{{thingsModelValue.LATI}}</text>
			</view>
			<view class="item">
				<text class="tit">电池电量：</text>
				<text class="clo">{{thingsModelValue.BATC}}%</text>
			</view>
			<view class="item">
				<text class="tit">太阳能电压：</text>
				<text class="clo">{{thingsModelValue.SUNV}}V</text>
			</view> -->
			<!-- 			<view class="item">
				<text class="tit">告警状态：</text>
				<text class="clo">{{thingsModelValue.ALAS}}</text>
			</view> -->
			<!-- 			<view class="item">
				<text class="tit">水位修正值：</text>
				<text class="clo">{{thingsModelValue.WLCV}}</text>
			</view> -->
			<!-- 			<view class="item">
				<text class="tit">声光报警方式：</text>
				<text class="clo">{{thingsModelValue.SLAM}}</text>
			</view>
			<view class="item">
				<text class="tit">上编码器修正值：</text>
				<text class="clo">{{thingsModelValue.HECV}}</text>
			</view>
			<view class="item">
				<text class="tit">下编码器修正值：</text>
				<text class="clo">{{thingsModelValue.LECV}}</text>
			</view>
			<view class="item">
				<text class="tit">水位修正值：</text>
				<text class="clo">{{thingsModelValue.CDEP}}</text>
			</view>
			<view class="item">
				<text class="tit">上下浮球状态：</text>
				<text class="clo">{{thingsModelValue.UDSS}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import shuangshuiwei from '@/components/shuangShuiWei.vue';
	export default {
		components: {
			shuangshuiwei
		},
		data() {
			return {
				qiehuan: true,
				titIf: false,
				list: [{
					name: '当前'
				}, {
					name: '3天'
				}, {
					name: '7天'
				}, {
					name: '状态'
				}],
				current2: 0,
				objSSW: {
					hlut: {},
					watl: {},
					hldt: {}
				},
				thingsModelValue: {},
				deviceName: '',
				productKey: '',
				typ: ''
			}
		},
		onLoad(option) {
			this.devshowFn(option.id)
			this.timemnumFn(0)
			this.typ = '今天'
		},
		methods: {
			change2(index) {
				this.objSSW = {}
				this.current2 = index
				this.timemnumFn(index)
				if (index == 0) {
					this.typ = '今天'
					this.titIf = false
				} else if (index == 1) {
					this.typ = '3天'
					this.titIf = false
				} else if (index == 2) {
					this.typ = '7天'
					this.titIf = false
				} else if (index == 3) {
					this.typ = '状态'
					this.titIf = true
				}
			},
			// 设备详情
			devshowFn(e) {
				uni.$u.http.get('/device/device/getInfoPhone/' + e).then(res => {
					if (res.code == 200) {
						let arr = JSON.parse(res.data.thingsModelValue)
						console.log('---设备信息---', res, arr);
						let obj = {}
						for (let i = 0; i < arr.length; i++) {
							if (arr[i].identifier == 'BATC') {
								obj.BATC = arr[i].value
							} else if (arr[i].identifier == 'WATL') {
								obj.WATL = arr[i].value
							} else if (arr[i].identifier == 'ALAS') {
								obj.ALAS = arr[i].value
							} else if (arr[i].identifier == 'SUNV') {
								obj.SUNV = arr[i].value
							} else if (arr[i].identifier == 'WLCV') {
								obj.WLCV = arr[i].value
							} else if (arr[i].identifier == 'DAPV') {
								obj.DAPV = arr[i].value
							} else if (arr[i].identifier == 'UDSS') {
								obj.UDSS = arr[i].value
							} else if (arr[i].identifier == 'SLDT') {
								obj.SLDT = arr[i].value
							} else if (arr[i].identifier == 'TIME') {
								obj.TIME = arr[i].value
							} else if (arr[i].identifier == 'CODE') {
								obj.CODE = arr[i].value
							} else if (arr[i].identifier == 'LONG') {
								obj.LONG = arr[i].value
							} else if (arr[i].identifier == 'LATI') {
								obj.LATI = arr[i].value
							} else if (arr[i].identifier == 'HECV') {
								obj.HECV = arr[i].value
							} else if (arr[i].identifier == 'LECV') {
								obj.LECV = arr[i].value
							} else if (arr[i].identifier == 'SLAM') {
								obj.SLAM = arr[i].value
							} else if (arr[i].identifier == 'IMEI') {
								obj.IMEI = arr[i].value
							}
						}
						this.thingsModelValue = obj
						this.deviceName = res.data.deviceName
						this.productKey = res.data.productKey
						this.sswListFn()
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('err----', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			sswListFn() {
				this.sswFnWATL('WATL')
				this.sswFnHLUT('HLUT')
				this.sswFnHLDT('HLDT')
			},
			// 水位计
			sswFnWATL(e) {
				console.log('');
				uni.$u.http.get('/device/device_reported_data/selectModelReportData', {
					params: {
						"tabPosition": 1,
						"identifier": e,
						"deviceName": this.deviceName,
						"productKey": this.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {
					console.log('水位计',res);
					if (res.code == 200) {
						let uniqueItems = res.data
						// let items = res.data
						// let uniqueItems = items.filter((item, index, self) =>
						// 	index === self.findIndex((i) => dayjs(i.time).format('HH') === dayjs(item.time)
						// 		.format('HH'))
						// );
						let list = uniqueItems
						let arr = []
						arr = list.map((i) => {
							return i.value * 1
						})
						let arrtime = []
						arrtime = list.map((i) => {
							return i.time
						})
						let obj = {
							typ: this.typ,
							name: "实时水位",
							data: arr,
							time: arrtime
						}
						this.objSSW.watl = obj
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 2000
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 2000
					});
					// uni.reLaunch({
					// 	url: '/pages/home/login'
					// });
				})
			},
			// 报警水位上限
			sswFnHLUT(e) {
				uni.$u.http.get('/device/device_reported_data/selectModelReportData', {
					params: {
						"tabPosition": 1,
						"identifier": e,
						"deviceName": this.deviceName,
						"productKey": this.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {
					if (res.code == 200) {
						let uniqueItems = res.data
						// let items = res.data
						// let uniqueItems = items.filter((item, index, self) =>
						// 	index === self.findIndex((i) => dayjs(i.time).format('HH') === dayjs(item.time)
						// 		.format('HH'))
						// );
						let list = uniqueItems
						let arr = []
						arr = list.map((i) => {
							return i.value * 1
						})
						let arrtime = []
						arrtime = list.map((i) => {
							return i.time
						})
						let obj = {
							typ: this.typ,
							name: "上限水位",
							data: arr,
							time: arrtime
						}
						this.objSSW.hlut = obj
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 2000
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 2000
					});
					// uni.reLaunch({
					// 	url: '/pages/home/login'
					// });
				})
			},
			// 报警水位下限
			sswFnHLDT(e) {
				uni.$u.http.get('/device/device_reported_data/selectModelReportData', {
					params: {
						"tabPosition": 1,
						"identifier": e,
						"deviceName": this.deviceName,
						"productKey": this.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
					}
				}).then(res => {
					
					if (res.code == 200) {
						let uniqueItems = res.data
						// let items = res.data
						// let uniqueItems = items.filter((item, index, self) =>
						// 	index === self.findIndex((i) => dayjs(i.time).format('HH') === dayjs(item.time)
						// 		.format('HH'))
						// );
						let list = uniqueItems
						let arr = []
						arr = list.map((i) => {
							return i.value * 1
						})
						let arrtime = []
						arrtime = list.map((i) => {
							return i.time
						})
						let obj = {
							typ: this.typ,
							name: "下限水位",
							data: arr,
							time: arrtime
						}
						this.objSSW.hldt = obj
						setTimeout(() => {
							this.onloshowFn()
						}, 300)
					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 2000
						});
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 2000
					});
					uni.reLaunch({
						url: '/pages/home/login'
					});
				})
			},
			// 选择日期
			timemnumFn(index) {
				this.timemnum = index
				let now = dayjs();
				// 当前时间减去2小时
				// 今日时间VV
				let todayStart = now.subtract(0, 'hour').format('YYYY-MM-DD ') + '00:00:00'
				let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 3天
				let threeStart = now.subtract(2, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 7天
				let fifteenStart = now.subtract(6, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let fifteenEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 30天
				// let sixtyStart = now.subtract(29, 'day').format('YYYY-MM-DD ') + '00:00:00'
				// let sixtyEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				if (index == 0) {
					this.beginReportingTime = todayStart
					this.endReportingTime = todayEnd
					setTimeout(() => {
						this.sswListFn()
					}, 300)
				}
				if (index == 1) {
					this.beginReportingTime = threeStart
					this.endReportingTime = threeEnd
					setTimeout(() => {
						this.sswListFn()
					}, 300)
				}
				if (index == 2) {
					this.beginReportingTime = fifteenStart
					this.endReportingTime = fifteenEnd
					setTimeout(() => {
						this.sswListFn()
					}, 300)
				}
				// if (index == 3) {
				// 	this.beginReportingTime = sixtyStart
				// 	this.endReportingTime = sixtyEnd
				// }

			},
			// 执行子组件方法
			onloshowFn() {
				this.$refs.myswj.onloshow()
			},
			onResize() {
				// 横屏竖屏
				uni.getSystemInfo({
					success: (res) => {
						// console.log(res.windowWidth);
						// console.log(res.windowHeight);
						if (res.windowWidth > res.windowHeight) {
							console.log('横屏');
							this.qiehuan = false
							setTimeout(() => {
								this.$refs.myswj.onloshow()
							}, 100)
						} else {
							console.log('竖屏');
							this.qiehuan = true
							setTimeout(() => {
								this.$refs.myswj.onloshow()
							}, 100)
						}
					}
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.tpe {
		padding: 30rpx;
		height: 90vh;
		background-color: #061f3d;

		.title {
			text-align: center;
			color: #06fccd;
			font-size: 50rpx;
			margin-bottom: 50rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.hei_ght {
				// height: 260rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;
				padding: 50rpx 0;
				line-height: 80rpx;
				word-break: break-all;
			}

			.item {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #f8b629;
				background-color: #10325e;
				margin-bottom: 30rpx;
				

				.tit {
					font-size: 40rpx;
					color: #f8b629;
					font-weight: bold;
				}

				.clo {
					font-size: 50rpx;
					color: #f8b629;
					
				}
			}
			.itema {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #2ebcee;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #2ebcee;
					font-weight: bold;
				}

				.clo {
					font-size: 45rpx;
					color: #2ebcee;
					
				}
			}

			.itemb {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #58e18c;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #58e18c;
					font-weight: bold;
				}

				.clo {
					font-size: 40rpx;
					color: #58e18c;
				}
			}

			.itemc {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #e08076;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #e08076;
					font-weight: bold;
				}

				.clo {
					font-size: 40rpx;
					color: #e08076;
				}
			}

			.itemd {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #d786d9;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #d786d9;
					font-weight: bold;
				}

				.clo {
					font-size: 50rpx;
					color: #d786d9;
				}
			}

			.iteme {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #53bfcc;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #53bfcc;
					font-weight: bold;
				}

				.clo {
					font-size: 50rpx;
					color: #53bfcc;
				}
			}

			.itemf {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #cc8653;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #cc8653;
					font-weight: bold;
				}

				.clo {
					font-size: 50rpx;
					color: #cc8653;
				}
			}
			.itemg {
				width: 260rpx;
				padding: 30rpx;
				border-radius: 10rpx;
				border-top: 8rpx solid #76cc4d;
				background-color: #10325e;
				margin-bottom: 30rpx;
				text-align: center;

				.tit {
					font-size: 40rpx;
					color: #76cc4d;
					font-weight: bold;
				}

				.clo {
					font-size: 50rpx;
					color: #76cc4d;
				}
			}
		}

	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>